<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Tutorials - App Inventor for Android
    </title>
    <link href="/static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="/static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="/static/css/appinventor.css" rel="stylesheet">
    <script src="http://www.google.com/js/gweb/analytics/autotrack.js">
</script>
    <script>
  var tracker = new gweb.analytics.AutoTrack({
        profile: 'UA-5856106-2'
      });
    </script>
    <style>
img.c2 {border-width:0}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="/about/"><img alt="" src="/static/images/appinventor_logo.gif"></a>
          </div>
          <form action="http://www.google.com/cse" id="cse-search-box">
            <input name="cx" type="hidden" value="011848991959401852367:xnrcbhk2zus"> <input name=
            "ie" type="hidden" value="UTF-8">
            <div class="header-search">
              <div class="header-search-query">
                <input class="textbox" name="q" type="text">
              </div>
              <div class="header-search-button">
                <input name="sa" src="/static/images/search-button.png" type="image">
              </div>
            </div>
          </form><script src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"
         >
</script>
          <div class="header-login">
            <div class="header-login-greeting">
              Learn about App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="/about/">About</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="/learn/">Learn</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="/forum/">Forum</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="http://appinventor.googlelabs.com/ode/Ya.html" target="_blank">My
              Projects</a>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="/learn/">Learn</a> &gt; Tutorials &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Tutorials
              </h1>
              <h2>
                Basic
              </h2>
              <p>
                Once you've <a href="/learn/setup/index.html">set up</a> your computer and built
                the HelloPurr app you are ready to begin these basic tutorials.
              </p>
              <ul id="tutorial">
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="paintpot/paintpot-part1.html">PaintPot</a><br>
                    PaintPot lets you scribble in different colors by touching the screen to draw
                    dots and lines. Concepts introduced in this project include: Canvas components
                    for drawing; event handlers that take arguments, including touch and drag
                    events; and Arrangement components for controlling screen layout. <a href=
                    "paintpot/paintpot-part2.html">Part 2</a> extends the project to draw dots of
                    different sizes, as an introduction to <em>global variables</em>.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="molemash/molemash.html">MoleMash</a><br>
                    In the arcade game Whac-a-Mole<sup>TM</sup>, a "mole" pops up at random
                    positions on a playing field, and the user score points by hitting the mole
                    with a mallet. This is a similar game that uses the touchscreen. This tutorial
                    introduces: image sprites, timers, and procedures.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="piccall/piccall.html">PicCall</a><br>
                    PicCall illustrates how to create applications that use the phone's
                    functionality. This application lets you select people from your contact list
                    and display their pictures. When you press a picture picture, the phone calls
                    that person.
                  </div>
                  <div class="clear"></div>
                </li>
              </ul>
              <h2>
                Advanced
              </h2>
              <p>
                These tutorials build on the things you learned in the beginner tutorials and
                explore App Inventor's more complex functionality.
              </p>
              <ul id="tutorial">
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="quizme/quizme.html">Quiz Me</a><br>
                    QuizMe is a trivia game about baseball, but you can use it as a template to
                    build quizzes on any topic. With QuizMe the user steps through a series of
                    questions, clicking a Next button to proceed to the next question. The user
                    enters an answer for each question and the app reports whether each answer is
                    correct or not. For this tutorial, you'll create an app in which the questions
                    are always the same unless you, the programmer, change them. Later, you can
                    create MakeAQuiz, an app that lets users create and modify the quiz questions.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="textgroup/textgroup.html">Text Group</a><br>
                    This tutorial introduces the Texting component for sending and processing
                    texts. You'll build an app that texts a message to a list of phone numbers.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="makequiztakequiz/makequiztakequiz.html">MakeQuiz and
                    TakeQuiz</a><br>
                    MakeQuiz and TakeQuiz are two apps that, in tandem, allow a teacher to create
                    quizzes for a student. Parents can create fun trivia aps for their children
                    during a long road trip, grade school teachers can build "Math Blaster"
                    quizzes, and college students can build quizzes to help their study groups
                    prepare for a final. This tutorial will walk you through creating both the
                    MakeQuiz and the TakeQuiz app.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="maptour/maptour.html">Map Tour</a><br>
                    This is a two-part tutorial introduces the ActivityStarter component for
                    launching arbitrary Android Apps and the ListPicker component for allowing a
                    user to choose from a list of items. You'll build MapTour, an app for visiting
                    French vacation destinations with a single click. Users of your app will be
                    able to visit the Eiffel Tower, the Lourve, and Notre Dame in quick succession.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="textgroup2/textgroup2.html">Text Group Part 2</a><br>
                    This tutorial extends the Text Group tutorial. That app sent a text to a fixed
                    list of phone numbers, and only the programmer could change the numbers in the
                    list. The app in this tutorial allows the user to add and remove the phone
                    numbers in the list, and it stores the list persistently in a database.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="broadcasterhub/broadcasterhub.html">Broadcaster
                    Hub</a><br>
                    In this tutorial, you'll write an app that automatically responds to texts
                    messages and broadcasts texts messages it receives to a list of phone
                    numbers.The app is inspired by FrontLineSMS, a tool that has been used in
                    developing countries to monitor elections, broadcast weather changes, and in
                    general connect people that don't have access to the web but do have phones and
                    mobile connectivity.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="notext/notext.html">No Text While Driving</a><br>
                    This tutorial demonstrates how an app can respond to text messages
                    automatically. You'll build an app that sends back a response when a text
                    message is received. The idea for the app came from University of San Franciso
                    student Daniel Finnegan.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="notext/notext2.html">No Text While Driving Part
                    2</a><br>
                    You know that texting while driving is dangerous, so you've created and
                    installed the No Text While Driving app on your phone. Now, when you drive you
                    open that app and let it auto-respond to incoming texts. But the jingle of the
                    texts coming in is killing you with curiosity-- wouldn't it be great if you
                    could hear the texts spoken aloud? With Part II of the tutorial, you'll extend
                    the app so that it speaks out both the message and who sent it. And since
                    you're making some changes anyway, you'll modify the auto-response so it
                    reports your whereabouts in the reply: "Sorry, I'm driving and I'm at 1600
                    Pennsylvania Avenue". Before completing this tutorial you should complete part
                    I.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="whereismycar/whereismycar.html">Android, Where's My
                    Car?</a><br>
                    You parked somewhere near the stadium or bar, but when the concert/party ends
                    you don't have a clue where the car is. The friends you came with are equally
                    as clueless. Fortunately you haven't lost your Android phone that never forgets
                    anything, and you remember you have the hot new app, Android, Where's My Car?.
                    With this app, you click a button when you park your car, and the Android uses
                    its location sensor to record the car's GPS coordinates and address. Later,
                    when you reopen the app, it shows you a map from where you are to the
                    remembered location-- problem solved! With this tutorial you'll be able to
                    download a created app and then study the annotated blocks below to better
                    understand the app and App Inventor programming in general.
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="image"></div>
                  <div class="text">
                    <a class="title" href="stockquotes/stockquotes.html">Stock Quotes</a><br>
                    This tutorial demonstrates how to use the Web component to make an app call a
                    web service (Yahoo! Finance) with a simple application programmer interface
                    (API).
                  </div>
                  <div class="clear"></div>
                </li>
                <li>
                  <div class="text">
                    <a class="title" href="molemash2/molemash2.html">MoleMash 2</a><br>
                    MoleMash2 provides an alternative implementation of the classic boardwalk game
                    that demonstrates how to use the Advanced features in the Blocks Editor and how
                    to layer Sprites.
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/" rel="license"><img alt=
              "Creative Commons License" class="c2" src=
              "http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              This work is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/"
              rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              ©2011 Google<br>
              <a href="/about/index.html">About</a> | <a href="/about/privacy.html">Privacy</a> |
              <a href="/about/termsofservice.html">Terms</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script>
  if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>